<template>
    <div class="container">
        <div class="chart-content" style="margin-left: 20px">
            <div :id="container" class="chart-views"></div>
        </div>
    </div>
</template>
<script>
import { dateFormatter, deepAssign, formatterNumber } from '@/common/js/util.js'
import Highcharts from 'highcharts';
import Variablepie from 'highcharts/modules/variable-pie'
Variablepie(Highcharts); 
export default {
    props: ['dataArr', 'container'],
    data() {
        return {
            charts: null,
        }
    },
    created() {
        /*
        var colors = [
            '#FF5A5A', // 红色
            '#4293F4', // 蓝色
            '#F4B342', // 黄色
            '#29E242'  // 绿色
        ];
        // 创建全局渐变色组
        Highcharts.getOptions().colors = colors.map(function (color) {
        	return {
        		radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 }, // 径向渐变
        		stops: [
        			[0, Highcharts.Color(color).brighten(-0.3).get('rgb')], // darken
        			[1, color]
        		]
        	};
        });
        */
    },
    methods: {
        chartInit(dataArr = null) {
            const that = this;
            dataArr = deepAssign({}, dataArr);
            this.charts = Highcharts.chart(this.container, {
                chart: Object.assign({ 
                    type: 'variablepie', 
                    backgroundColor: '#214886', // 背景色
                    spacingLeft: 10,
                }, dataArr.chart || {}), 
                title: false,
                credits: { enabled: false },  // 去版权水印
                exporting: { enabled: false }, // 隐藏导出
                tooltip: deepAssign({
                    enabled: true,
                    borderRadius: 6, 
                    borderWidth: 0,
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    useHTML: true,
                    formatter: function() {
                        const valueSuffix = dataArr.valueSuffix ? dataArr.valueSuffix : '人'
                        const title = dataArr.tooltip && dataArr.tooltip.title ? `<div style="padding-bottom: 10px;"><strong>${dataArr.tooltip.title}</strong></div>` : ''
                        if(this.total >= 1) {
                            return `${title}<small style="margin-bottom:5px;display:block">${this.key}: ${formatterNumber(this.y, 10000, 2, true)}${valueSuffix}</small><span style="color:${this.color};font-size:14px">●</span>占比: ${(this.y * 100/this.total).toFixed(2)}%<br/>`
                        } else {
                            return `${title}<small style="margin-bottom:5px;display:block">${this.key}: ${formatterNumber(this.y, 10000, 2, true)}${valueSuffix}</small>`
                        }
                    },
                    padding: 12
                }, dataArr.tooltip || {}),
                legend: deepAssign({
                    enabled: true,
                    itemDistance: 20,  // 图例项间距
                    verticalAlign: 'middle',
                    align: 'right',
                    squareSymbol: false,
                    symbolWidth: 16,
                    symbolRadius: 1,
                    symbolPadding: 7,
                    itemMarginBottom: 5,
                    width: 100,
                    y: -10,
                    itemStyle: {
                        color: '#7BA2E1',
                        fontWeight: 'normal'
                    },
                    itemHoverStyle: {
                        color: '#ffffff'
                    }
                }, dataArr.legend || {}),
                plotOptions: {
                    variablepie: deepAssign({
                        colors: [
                            '#FF5A5A', // 红色
                            '#4293F4', // 蓝色
                            '#ffcc00', // 黄色
                            '#29E242', // 绿色
                            '#1ACEB2',
                            '#FF9946',
                            '#999933'
                        ],
			            borderColor: 'transparent',
                        cursor: 'pointer',
			            showInLegend: true,
			            allowPointSelect: true, // 允许选中
                        startAngle: -80, //旋转角度
			            dataLabels: {
			            	enabled: true,
			            	//format: '{point.y}单 {point.name}',
                            useHTML: true,
                            formatter: function() {
                                // return `${this.key} <b style="color:#C2E0FF">${formatterNumber(parseInt(this.y), 10000, 2, true)}单</b>`;
                                if (dataArr.showScale) {
                                    return `${(this.y * 100/this.total).toFixed(2)}%`
                                }
                                return `${this.key}`;
                            },
			            	style: {
			            		color: '#7BA2E1',
                                textOutline: 'none', // 去阴影
                                fontWeight: 'normal',
                                fontSize: '11px'
			            	},
                            connectorWidth: 1, // 连接线宽度
                            connectorPadding: 10, // 连接线与标签间隔 
                            distance: 25, // 连接线长度
                            padding: 0, // 标签的内边距
			            },
                        slicedOffset: 6, // 点击展开的幅度
                        minPointSize: 10,
		                minSize: 170, // 最小尺寸
                        zMin: 0,
                        //size: 180,
                    }, dataArr.variablepie || {}),
                }, 
                series: dataArr.series
            })
        }
    },
    watch: {
        'dataArr.series': function(val, oldVal) {
            this.chartInit(this.dataArr)
        }
    }
}
</script>
<style lang="scss" scoped>
    .container, .chart-views{
        width: 100%;
        height: 100%;
    }
    .chart-content {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0;
    }
</style>